<template>
    <div id="App">
        <div class="content" v-if="bool">
            <!-- 输入数据 -->
            <table>
                <thead>
                    <tr>
                        <th colspan="2" width="100">
                            <h1>个人信息表单</h1>
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>姓名</td>
                        <td>
                            <input type="text" v-model="name" placeholder="姓名（必填）" value="">
                        </td>
                    </tr>
                    <tr>
                        <td>年龄</td>
                        <td>
                            <input type="text" v-model.number="age" placeholder="年龄（必填）" value="">
                        </td>
                    </tr>
                    <tr>
                        <td>性别</td>
                        <td>
                            <label>男<input type="radio" value="男" v-model="sex" name="sex"></label>
                            <label>女<input type="radio" value="女" v-model="sex" name="sex"></label>
                        </td>
                    </tr>
                    <tr>
                        <td>婚姻状态</td>
                        <td>
                            <label>已婚<input type="radio" value="已婚" v-model="married" name="married"></label>
                            <label>未婚<input type="radio" value="未婚" v-model="married" name="married"></label>
                        </td>
                    </tr>
                    <tr>
                        <td>爱好</td>
                        <td>
                            <label>音乐<input type="checkbox" name="love" value="音乐" v-model="love"></label>
                            <label>运动<input type="checkbox" name="love" value="运动" v-model="love"></label>
                            <label>旅游<input type="checkbox" name="love" value="旅游" v-model="love"></label>
                            <label>编程<input type="checkbox" name="love" value="编程" v-model="love"></label>
                            <label>逛街<input type="checkbox" name="love" value="逛街" v-model="love"></label>
                            <label>看电影<input type="checkbox" name="love" value="看电影" v-model="love"></label>
                            <label>上网<input type="checkbox" name="love" value="上网" v-model="love"></label>
                            <label>游戏<input type="checkbox" name="love" value="游戏" v-model="love"></label>
                        </td>
                    </tr>
                    <tr>
                        <td>年底旅游城市</td>
                        <td>
                            <select name="city" id="" v-model="city">
                                <option value="">年底旅游城市</option>
                                <option value="云南">云南</option>
                                <option value="长沙">长沙</option>
                                <option value="广州">广州</option>
                                <option value="拉萨">拉萨</option>
                                <option value="北京">北京</option>
                                <option value="沈阳">沈阳</option>
                                <option value="黑龙江">黑龙江</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td>喜欢的颜色</td>
                        <td>
                            <input type="color" value="" v-model="color">
                        </td>
                    </tr>
                    <tr>
                        <td>
                            自我介绍
                        </td>
                        <td>
                            <textarea name="" id="" cols="30" rows="10" v-model="text" value=""></textarea>
                        </td>
                    </tr>
                    <tr>
                        <td>出生日期</td>
                        <td>
                            <input type="date" value="" v-model="data">
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <input type="button" value="确认提交" @click="submit">
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="content tab" v-else>
            <!-- 表单 -->
            <h1>个人信息展示</h1>
            <table border="1" style="border-collapse: collapse;">
                <!-- cellpadding=10 -->
                <tbody>
                    <tr>
                        <td>年龄</td>
                        <td>{{ age }}</td>
                    </tr>
                    <tr>
                        <td>性别</td>
                        <td>{{ sex }}</td>
                    </tr>
                    <tr>
                        <td>婚姻</td>
                        <td>{{ married }}</td>
                    </tr>
                    <tr>
                        <td>爱好</td>
                        <td>
                            {{ love.length === 0 ? "无" : love.join() }}
                        </td>
                    </tr>
                    <tr>
                        <td>年底旅游城市</td>
                        <td>{{ city || "不旅游" }}</td>
                    </tr>
                    <tr>
                        <td>喜欢的颜色</td>
                        <td>{{ color || "无特别喜欢" }}</td>
                    </tr>
                    <tr>
                        <td>自我介绍</td>
                        <td>{{ text || "暂无此人自我介绍" }}</td>
                    </tr>
                    <tr>
                        <td>出生日期</td>
                        <td>{{ data || "不详" }}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</template>

<script>
export default {
    name: 'App',
    data() {
        return {
            bool: true,
            // bool: false,
            name: '',
            age: '',
            sex: "男",
            married: "已婚",
            love: [],
            city: '',
            color: '',
            text: "",
            data: ''
        }
    },
    methods: {
        submit() {
            if (this.name === "" || this.age === "") {
                return alert("名字年龄必须填，请正确输入！")
            }
            this.bool = false
        }
    }
}
</script>

<style>
.content {
    /* height: 550px; */
    width: 450px;
    border: 1px solid rgba(200, 200, 200);
    border-radius: 20px;
    margin: 100px auto;
}

h1 {
    font-family: "黑体";
    font-size: 30px;
}

tr {
    padding: 40px 0;
    height: 30px;
}



tbody>tr td:nth-child(1) {
    width: 120px;
    text-align: right;
}

tbody>tr td:nth-child(2) {
    width: 330px;
    padding-left: 50px;
    text-align: left;
}

tbody>tr:last-child td {
    text-align: center;
}

.tab tbody tr td {
    padding: 10px;
    text-align: left;
}
</style>